<script>
export default {
  name: 'FirstPage',
  data() {
    return {
      tableData: [],
      tableHeight: 300,
    }
  },
  mounted() {
    console.log('mounted')
    this.$nextTick(() => {
      this.onWindowResize()
    })
    window.addEventListener('resize', () => this.onWindowResize())
  },
  computed: {},
  methods: {
    onWindowResize() {
      this.tableHeight = this.$refs.tableContainerRef.offsetHeight
    },
    onDataChange(flag) {
      switch (flag) {
        case 'noData': {
          this.tableData = []
          break
        }
        case 'littleData': {
          this.tableData = [
            {
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄',
            },
            {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄',
            },
            {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
            },
            {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄',
            },
          ]
          break
        }
        case 'bigData': {
          this.tableData = [
            {
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄',
            },
            {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄',
            },
            {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
            },
            {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄',
            },
            {
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄',
            },
            {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄',
            },
            {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
            },
            {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄',
            },
            {
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄',
            },
            {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄',
            },
            {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
            },
            {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄',
            },
          ]
        }
      }
    },
  },
}
</script>

<template>
  <div class="l-container">
    <div class="l-container-header">头部</div>
    <div class="l-container-body l-main">
      <div class="l-main-top">
        <el-button @click="onDataChange('noData')">没有数据</el-button>
        <el-button @click="onDataChange('littleData')">少量数据</el-button>
        <el-button @click="onDataChange('bigData')">大量数据</el-button>
      </div>
      <div class="l-main-center c-tablePage">
        <div ref="tableContainerRef" class="c-tablePage-table">
          <el-table :data="tableData" style="width: 100%" :height="tableHeight">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
          </el-table>
        </div>
        <div class="c-tablePage-page">分页条</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.l-container {
  display: flex;
  flex-direction: column;
  &-header {
    height: 78px;
    background-color: red;
  }
  &-body {
    flex: 1;
    background-color: antiquewhite;
    padding-top: 30px;
  }
}
.l-main {
  display: flex;
  flex-direction: column;
  &-top {
    height: 70px;
    background-color: lightcoral;
  }
  &-center {
    background-color: lightcyan;
  }
}
.c-tablePage {
  display: flex;
  flex-direction: column;
  flex: 1;
  &-table {
    flex: 1;
  }
  &-page {
    height: 40px;
    background-color: lightgreen;
  }
}
</style>
